<template>
  <div class="pet-container gradient-bg">
    <header class="header glass">
      <el-button @click="$router.back()" text>
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <h2>我的宠物</h2>
      <div style="width: 100px"></div>
    </header>

    <div class="pet-content" v-if="pet">
      <!-- 宠物展示区 -->
      <div class="pet-display glass">
        <div class="pet-avatar-large">
          <div class="pet-icon">{{ getPetIcon(pet.pet_type) }}</div>
          <div class="pet-level-badge">Lv.{{ pet.level }}</div>
        </div>
        <h2 class="pet-name">{{ pet.pet_name }}</h2>
        <div class="pet-exp">
          <span>经验值: {{ pet.exp }} / {{ nextLevelExp }}</span>
          <el-progress :percentage="expProgress" />
        </div>
      </div>

      <!-- 宠物状态 -->
      <div class="pet-stats glass">
        <h3>宠物状态</h3>
        <div class="stat-item">
          <span class="label">❤️ 健康值</span>
          <el-progress :percentage="pet.health" :color="getHealthColor(pet.health)" />
          <span class="value">{{ pet.health }}/100</span>
        </div>
        <div class="stat-item">
          <span class="label">🍖 饥饿值</span>
          <el-progress :percentage="pet.hunger" color="#ffa500" />
          <span class="value">{{ pet.hunger }}/100</span>
        </div>
        <div class="stat-item">
          <span class="label">😊 快乐值</span>
          <el-progress :percentage="pet.happiness" color="#ff69b4" />
          <span class="value">{{ pet.happiness }}/100</span>
        </div>
      </div>

      <!-- 互动按钮 -->
      <div class="action-buttons">
        <el-button 
          type="warning" 
          size="large" 
          @click="feedPet"
          :loading="feeding"
          :disabled="pet.hunger >= 90"
        >
          <el-icon><Food /></el-icon>
          喂食 (-5⭐)
        </el-button>
        <el-button 
          type="success" 
          size="large"
          @click="playWithPet"
          :loading="playing"
          :disabled="pet.happiness >= 90"
        >
          <el-icon><Star /></el-icon>
          玩耍 (-3⭐)
        </el-button>
        <el-button 
          type="primary" 
          size="large"
          @click="showRenameDialog = true"
        >
          <el-icon><Edit /></el-icon>
          改名
        </el-button>
      </div>

      <!-- 提示信息 -->
      <div class="tips glass">
        <h4>💡 养成小贴士</h4>
        <ul>
          <li>学习单词可以获得星星，用星星喂养宠物</li>
          <li>定期喂食和玩耍，让宠物保持快乐</li>
          <li>宠物等级越高，获得的学习加成越多</li>
          <li>宠物会随着时间自然消耗饥饿值和快乐值</li>
        </ul>
      </div>
    </div>

    <!-- 改名对话框 -->
    <el-dialog v-model="showRenameDialog" title="给宠物改名" width="400px">
      <el-input 
        v-model="newName" 
        placeholder="请输入新名字"
        maxlength="10"
        show-word-limit
      />
      <template #footer>
        <el-button @click="showRenameDialog = false">取消</el-button>
        <el-button type="primary" @click="renamePet" :loading="renaming">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Food, Star, Edit } from '@element-plus/icons-vue'
import { petApi } from '@/api/pet'
import { usePetStore } from '@/stores/pet'
import { useUserStore } from '@/stores/user'

const petStore = usePetStore()
const userStore = useUserStore()

const pet = computed(() => petStore.pet)
const feeding = ref(false)
const playing = ref(false)
const renaming = ref(false)
const showRenameDialog = ref(false)
const newName = ref('')

const nextLevelExp = computed(() => pet.value ? (pet.value.level * pet.value.level * 100) : 100)
const expProgress = computed(() => pet.value ? Math.min((pet.value.exp / nextLevelExp.value) * 100, 100) : 0)

const petIcons: Record<string, string> = {
  dragon: '🐲',
  fox: '🦊',
  panda: '🐼',
  rabbit: '🐰',
  cat: '🐱',
  dog: '🐶',
  bear: '🐻',
  penguin: '🐧'
}

const getPetIcon = (type: string) => petIcons[type] || '🐾'

const getHealthColor = (value: number) => {
  if (value >= 70) return '#67c23a'
  if (value >= 40) return '#e6a23c'
  return '#f56c6c'
}

const feedPet = async () => {
  if (!pet.value) return
  
  if (userStore.user!.stars < 5) {
    ElMessage.warning('星星不足，快去学习赚星星吧！')
    return
  }
  
  feeding.value = true
  try {
    const res = await petApi.feedPet()
    if (res.success && res.data) {
      petStore.setPet(res.data.pet)
      await userStore.getUserInfo()
      ElMessage.success(`${pet.value.pet_name}吃得好开心！饥饿值+20`)
    }
  } catch (error) {
    ElMessage.error('喂食失败')
  } finally {
    feeding.value = false
  }
}

const playWithPet = async () => {
  if (!pet.value) return
  
  if (userStore.user!.stars < 3) {
    ElMessage.warning('星星不足，快去学习赚星星吧！')
    return
  }
  
  playing.value = true
  try {
    const res = await petApi.playWithPet()
    if (res.success && res.data) {
      petStore.setPet(res.data.pet)
      await userStore.getUserInfo()
      ElMessage.success(`${pet.value.pet_name}玩得好开心！快乐值+20`)
    }
  } catch (error) {
    ElMessage.error('互动失败')
  } finally {
    playing.value = false
  }
}

const renamePet = async () => {
  if (!newName.value.trim()) {
    ElMessage.warning('请输入新名字')
    return
  }
  
  renaming.value = true
  try {
    const res = await petApi.renamePet(newName.value)
    if (res.success && res.data) {
      petStore.setPet(res.data.pet)
      ElMessage.success('改名成功！')
      showRenameDialog.value = false
      newName.value = ''
    }
  } catch (error) {
    ElMessage.error('改名失败')
  } finally {
    renaming.value = false
  }
}

onMounted(async () => {
  await petStore.loadPet()
})
</script>

<style scoped lang="scss">
.pet-container {
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  overflow-y: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  margin-bottom: 30px;
  
  h2 {
    color: white;
    margin: 0;
    font-size: 1.5rem;
  }
}

.pet-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pet-display {
  padding: 40px;
  text-align: center;
  
  .pet-avatar-large {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    
    .pet-icon {
      font-size: 10rem;
      animation: float 3s ease-in-out infinite;
    }
    
    .pet-level-badge {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-weight: bold;
      font-size: 1.2rem;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
  }
  
  .pet-name {
    color: white;
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  .pet-exp {
    max-width: 400px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
    
    span {
      display: block;
      margin-bottom: 10px;
      font-size: 1.1rem;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.pet-stats {
  padding: 30px;
  
  h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.5rem;
  }
  
  .stat-item {
    margin-bottom: 20px;
    
    .label {
      display: inline-block;
      width: 120px;
      color: white;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }
    
    .value {
      color: rgba(255, 255, 255, 0.8);
      margin-left: 10px;
      font-size: 1rem;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  
  .el-button {
    min-width: 150px;
    height: 60px;
    font-size: 1.1rem;
    border-radius: 30px;
  }
}

.tips {
  padding: 25px 30px;
  
  h4 {
    color: white;
    margin-bottom: 15px;
    font-size: 1.2rem;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    li {
      color: rgba(255, 255, 255, 0.9);
      padding: 8px 0;
      font-size: 1rem;
      line-height: 1.6;
      
      &:before {
        content: "•";
        color: #67c23a;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
      }
    }
  }
}
</style>
